<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业管理</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/token.js"></script>
    <style>
        .el-header {
            background-color: #545c64;
        }

        .header-img {
            width: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="div">
    <template>
        <div class="dept-box">
            <!--新增按钮-->
            <el-row>
                <el-col :span="24">
                    <div class="tool-box">
                        <el-button type="primary" icon="el-icon-circle-plus-outline" size="small"
                                   @click="openFormToAdd">新增
                        </el-button>
                    </div>
                </el-col>
            </el-row>

            <!--列表数据表格-->
            <el-table
                    :data="list"
                    row-key="id"
                    default-expand-all
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="企业名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="expirationDate"
                        label="到期时间"
                        width="180">
                    <template slot-scope="{row}">
                        {{ row.expirationDate || '暂无到期时间' }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="所在地"
                        width="180">
                    <template slot-scope="{row}">
                        {{ row.city || '暂无所在地' }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址"
                        width="180">
                    <template slot-scope="{row}">
                        {{ row.address || '暂无地址' }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="representative"
                        label="企业法人"
                        width="180">
                    <template slot-scope="{row}">
                        {{ row.representative || '暂无企业法人' }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="联系方式"
                        width="180">
                    <template slot-scope="{row}">
                        {{ row.phone || '暂无联系方式' }}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="industry"
                        label="所属行业"
                        width="180">
                    <template slot-scope="{row}">
                        {{ row.industry || '暂无所属行业' }}
                    </template>
                </el-table-column>
                <el-table-column
                        label="状态">
                    <template slot-scope="scope">
                        {{ scope.row.state == 1 ? '启用' : '禁用' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="150">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" plain @click="openFormToUpdate(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="openToDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页组件-->
            <el-pagination
                    background
                    :current-page="page"
                    :page-size="5"
                    layout="total, prev, pager, next, jumper"
                    :total="total"
                    @current-change="pageChange">
            </el-pagination>

            <!--新增|编辑弹框-->
            <el-dialog :title="dialogTitle" width="600px" :visible.sync="formVisible" @close="closeForm('form')">
                <el-form :model="form" :rules="rules" ref="form">
                    <el-form-item label="公司名称" prop="name" label-width="80px">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所在城市" label-width="80px">
                        <el-input v-model="form.city" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="公司地址" label-width="80px">
                        <el-input v-model="form.address" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="公司电话" label-width="80px">
                        <el-input v-model="form.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所属行业" label-width="80px">
                        <el-input v-model="form.industry" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="到期" label-width="80px">
                        <el-date-picker
                                v-model="form.expirationDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="状态" label-width="80px">
                        <el-switch v-model="form.state" active-color="#13ce66"
                                   inactive-color="#ff4949"
                                   :active-value="1"
                                   :inactive-value="0"></el-switch>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="formVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmForm('form')">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </template>
</div>
<script>
    let vue = new Vue({
        el: "#div",
        data: {
            /* 表示当前页数据 */
            list: [],
            page: 1, /* 表示页号 */
            total: 0, /* 总记录数 */
            form: {}, /* 新增和修改表单数据, 必须和后台用来接收数据的 java bean 相对应, 并注意数据类型（日期在前台用字符串） */
            formVisible: false, /* 控制新增和修改表单可见性 */
            dialogTitle: '', /* 控制新增和修改表单标题 */
            rules: {
                name: [
                    {required: true, message: '请输入名称', trigger: 'blur'},
                    {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
                ]
            } /* 表单校验规则 */
        },
        mounted: function () {
            this.findAll(1);
        }, /* data 初始化操作 */
        methods: {
            findAll(page) {
                axios.get("companyServlet?method=findByPage&currentPage=" + page)
                    .then((resp) => {
                        if (resp.data.flag) {
                            this.list = resp.data.resultData.list;
                            this.total = resp.data.resultData.total;
                        } else {
                            this.$message({
                                showClose: true,
                                message: '查询失败!',
                                type: 'error'
                            });
                        }
                    })
                    .catch(() => {
                        this.$message({
                            showClose: true,
                            message: '请求失败!',
                            type: 'error'
                        });
                    })
            },
            delete(id) {
                axios.get("companyServlet?method=delete&id="+id)
                    .then((resp)=>{
                        if (resp.data.flag){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.pageChange(1)
                        } else {
                            this.$message({
                                showClose: true,
                                message: resp.data.message,
                                type: 'error'
                            });
                        }
                    })
                    .catch(()=>{
                        this.$message({
                            showClose: true,
                            message: '请求失败',
                            type: 'error'
                        });
                    })
            },
            add(formData) {
                axios.post("companyServlet", formData + "method=add")
                    .then((resp) => {
                        if (resp.data.flag) {
                            this.$message({
                                showClose: true,
                                message: '添加成功!',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                showClose: true,
                                message: resp.data.message,
                                type: 'error'
                            });
                        }
                    })
                    .catch(() => {
                        this.$message({
                            showClose: true,
                            message: '请求失败!',
                            type: 'error'
                        });
                    })
            },
            update(formData) {
                axios.post("companyServlet", formData + "method=update")
                    .then((resp) => {
                        if (resp.data.flag){
                            this.$message({
                                showClose: true,
                                message: '修改成功!',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                showClose: true,
                                message: resp.data.message,
                                type: 'error'
                            });
                        }
                    })
                    .catch(() => {
                        this.$message({
                            showClose: true,
                            message: '请求失败!',
                            type: 'error'
                        });
                    })
            },
            pageChange(page) {
                this.findAll(page);
            },
            openToDelete(row) {
                /*this.$confirm('确定删除企业 【' + row.name + '】 吗?', '提示', {
                    /!*confirmButtonText: '确定',*!/
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delete(row.id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });*/

                this.$confirm('确定删除企业 【' + row.name + '】 吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.delete(row.id);
                })
            },
            openFormToAdd() {
                this.formVisible = true;
                this.dialogTitle = "新增"
                this.form = {};
            },
            openFormToUpdate(row) { // row 就是这行的数据 { name:'', address:'' ... }
                this.formVisible = true;
                this.dialogTitle = "修改"
                this.form = row;
            },
            confirmForm(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        if (this.dialogTitle == '新增') {
                            this.add(this.getStringParameter(this.form))
                        } else if (this.dialogTitle == '修改') {
                            this.update(this.getStringParameter(this.form))
                        }
                        this.formVisible = false;
                        this.findAll(1);
                    }
                })
            },
            closeForm(formName) {
                this.$refs[formName].clearValidate()
            },
            getStringParameter(formData) {
                let param = "";
                for (let property in formData) {
                    param += property + "=" + formData[property] + "&"
                }
                //param = param.substring(0,param.length-1);
                return param;
            }
        }
    });
</script>

<style>
    .dept-box {
        width: 100%;
    }

    .dept-box .tool-box {
        padding: 10px 10px;
        border-bottom: 1px solid #eee;
    }

    .dept-box .el-pagination {
        margin-top: 20px;
    }
</style>
</body>
</html>